<script setup>
import { ref } from 'vue'
// const tel= ref('')
const activeName = ref('first')
</script>

<template>
  <div class="app">
    <div class="login">
      <div class="left">
        <ul>
          <li>
            <img src="./assets/logo.png" alt="logo" />
            <p>找工作<br />上BOSS直聘直接谈</p>
          </li>
          <li>
            <img src="./assets/logo.png" alt="logo" />
            <p>沟通<br />在线职位及时沟通</p>
          </li>
          <li>
            <img src="./assets/logo.png" alt="logo" />
            <p>任性选<br />各大行业职位任你选</p>
          </li>
        </ul>
      </div>
      <div class="right">
        <div>
          <h1>验证码登录/注册</h1>
          <p>首次验证通过即注册BOSS直聘账号</p>
          <div class="form">
            <el-tabs
              v-model="activeName"
              type="card"
              class="demo-tabs"
              @tab-click="handleClick"
              stretch="true"
            >
              <el-tab-pane label="我要找工作" name="first">
                <div style="text-align: center">
                  <el-input
                    v-model="tel"
                    style="max-width: 360px; height: 40px; margin-top: 20px"
                    placeholder="手机号"
                    class="input-with-select"
                  >
                    <template #prepend>
                      <el-select
                        v-model="select"
                        placeholder="+86"
                        style="width: 115px"
                        size="large"
                      >
                        <el-option label="中国大陆" value="1" />
                        <el-option label="非中国大陆手机号" value="2" />
                      </el-select>
                    </template>
                  </el-input>
                  <el-input
                    v-model="input2"
                    style="max-width: 360px; height: 40px; margin-top: 20px"
                    placeholder="短信验证码"
                  >
                    <template #append>发送验证码</template>
                  </el-input>
                  <div class="btn">登录/注册</div>
                </div>
                <div class="agree">
                  <p>
                    <input type="checkbox" />
                    已阅读并同意BOSS直聘<a href="#">《用户协议》</a
                    ><a href="#">《隐私政策》</a
                    >,允许<br />直聘统一管理本人账号信息
                  </p>
                </div>
                <div class="service">
                  <p>客服电话 400-065-5799 工作时间：8:00-22:00</p>
                  <p>
                    <a href="#">人力资源服务许可证|</a><a href="#">营业执照|</a
                    ><a href="#">朝阳区人社局监督电话</a>
                  </p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我要招聘" name="second">
                <div style="text-align: center">
                  <el-input
                    v-model="tel"
                    style="max-width: 360px; height: 40px; margin-top: 20px"
                    placeholder="手机号"
                    class="input-with-select"
                  >
                    <template #prepend>
                      <el-select
                        v-model="select"
                        placeholder="+86"
                        style="width: 115px"
                        size="large"
                      >
                        <el-option label="中国大陆" value="1" />
                        <el-option label="非中国大陆手机号" value="2" />
                      </el-select>
                    </template>
                  </el-input>
                  <el-input
                    v-model="input2"
                    style="max-width: 360px; height: 40px; margin-top: 20px"
                    placeholder="短信验证码"
                  >
                    <template #append>发送验证码</template>
                  </el-input>
                  <div class="btn">登录/注册</div>
                  <div class="small_icon">
                    <Monitor
                      style="
                        width: 1em;
                        height: 1em;
                        margin-right: 8px;
                        color: #6f9edf;
                      "
                    /><span>桌面端下载</span>
                  </div>
                </div>
                <div class="agree">
                  <p>
                    <input type="checkbox" />
                    已阅读并同意BOSS直聘<a href="#">《用户协议》</a
                    ><a href="#">《隐私政策》</a
                    >,允许<br />直聘统一管理本人账号信息
                  </p>
                </div>
                <div class="service">
                  <p>客服电话 400-065-5799 工作时间：8:00-22:00</p>
                  <p>
                    <a href="#">人力资源服务许可证|</a><a href="#">营业执照|</a
                    ><a href="#">朝阳区人社局监督电话</a>
                  </p>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.app {
  background-color: #00c1c1; /* 设置背景色 */
  height: 100vh; /* 使背景覆盖整个视口 */
}

.login {
  display: flex;
  position: absolute;
  width: 728px;
  height: 595px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
}

.login .left {
  display: flex;
  width: 240px;
  height: 100%;
  background-color: #f5f7f5;
  border-radius: 30px 0 0 30px;
}

.left li:first-child {
  padding-top: 68px;
}

.left li {
  display: flex;
  padding-left: 32px;
  padding-bottom: 50px;
}

.left img {
  width: 42px;
  height: 42px;
  margin-right: 10px;
  vertical-align: middle;
}

.left ul li p {
  display: block;
  line-height: 20px;
  font-size: 14px;
  color: #00a6a7;
  font-weight: 600;
  /* margin: 10px; */
}

.login .right {
  width: 488px;
  height: 595px;
  background-color: #fff;
  border-radius: 0 30px 30px 0;
}

.right h1 {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: #222;
  line-height: 30px;
  text-align: center;
  padding-top: 50px;
}

.right p {
  display: block;
  color: #999;
  line-height: 17px;
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
}

.form {
  background-color: #fff;
  display: flex;
  margin-top: 20px;
}

.right .form .demo-tabs {
  display: flex;
  width: 360px;
  padding: 4px;
  /* background: #f8f8f8; */
  border-radius: 12px;
  margin: 0 auto;
}

.btn {
  display: block;
  width: 352px;
  height: 48px;
  background: linear-gradient(90deg, #00bebd, #01a7a7);
  color: #fff;
  border-radius: 8px;
  line-height: 48px;
  font-size: 16px;
  align-items: center;
  margin-top: 20px;
}

.small_icon {
  margin-top: 20px;
}

.agree {
  display: block;
  margin-top: 30px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  color: #666;
}

.service {
  margin-top: 30px;
  color: #8d92a1;
  font-size: 12px;
  text-align: center;
  line-height: 12px;
}
</style>
